import { defineStore } from 'pinia';
import router from '@/router';
import type { sysConfigProps, ThemeConfigProps } from '../interface';
import { DEFAULT_THEME } from '@/config/config';
export const useSystemStore = defineStore('systemStore', {
  state: (): sysConfigProps => {
    return {
      collapsed: false,
      settingDrawer: false,
      tagsPage: [
        {
          path: '/index',
          title: '主页',
        },
      ],
      themeConfig: {
        themeLayout: DEFAULT_THEME.themeLayout,
        themeMode: DEFAULT_THEME.themeMode,
        themeColor: DEFAULT_THEME.themeColor,
        sideBarBg: DEFAULT_THEME.sideBarBg,
        fontAndIconDefault: DEFAULT_THEME.fontAndIconDefault,
        fontAndIconSelected: DEFAULT_THEME.fontAndIconSelected,
      },
    };
  },
  getters: {
    showSidebar: state => state.themeConfig.themeLayout !== 'header',
    showSidebarLogo: state => state.themeConfig.themeLayout === 'sidebar',
    showHeaderLogo: state => state.themeConfig.themeLayout !== 'sidebar',
    chartColor: state =>
      state.themeConfig.themeMode == 'light' ? 'rgba(0,0,0,0.9)' : '#fff',
  },
  persist: true,
  actions: {
    TOGGLE_COLLAPSED() {
      this.collapsed = !this.collapsed;
    },
    TOGGLE_DRAWER() {
      this.settingDrawer = !this.settingDrawer;
    },
    SET_THEME_CONFIG(newConfig: ThemeConfigProps) {
      this.themeConfig = newConfig;
    },
    ADD_TAGSPAGE({ path, meta: { title } }: any) {
      if (!this.tagsPage.some((item: any) => item.path === path)) {
        this.tagsPage.push({ path, title });
      }
    },
    REMOVE_TAGSPAGE(path: string) {
      let index = this.tagsPage.findIndex((r: any) => r.path == path);
      let currentPath = router.currentRoute.value.path;
      if (
        this.tagsPage.length > 1 &&
        this.tagsPage[index].path === currentPath
      ) {
        router.push(this.tagsPage[index + (!index ? 1 : -1)].path);
      }
      this.tagsPage.splice(index, 1);
    },
  },
});
